<template>
	<view class="content">
		<scroll-view class="itembox" scroll-y="true">
			<view class="top">
				<view class="left">
					<view class="title">{{name}}</view>
					<view class="over-time">交卷时间：{{subTime}}</view>
					<view class="length">类型：{{type}}</view>
				</view>
				<view class="right cir-progress">
					<iCircle :percent="percent" :size="250" BgId="BgId" InId="InId" :trailColor="tcolor" :strokeColor="scolor">
						<icon v-if="percent == 100" type="success" size="60" color="#5cb85c" />
						<view v-else class="cir_progress_title">
							<view style="text-align: center;">
								<text class="cir_progress_score">{{percent}}</text>
								<text class="cir_progress_unit">%</text>
							</view>
							<view class="cir_progress_type">正确率</view>
						</view>
						<view slot="canvas">
							<canvas class="CanvasBox strokeCanvas" canvas-id="BgId"></canvas>
							<canvas class="CanvasBox trailCanvas" canvas-id="InId"></canvas>
						</view>
					</iCircle>
				</view>
			</view>
			<view class="hr"></view>
			<view class="work">
				<view class="work_title">
					<view class="title_art">自评情况</view>
					<view class="title_right">
						<text>正确</text>
						<view class="circle true_circle"></view>
					</view>
					<view class="title_wrong">
						<text>错误</text>
						<view class="circle false_circle"></view>
					</view>
				</view>
				<view class="work_art" v-if="resultList">
					<view class="row">
						<block class="work_circle work_art_right" v-for="(item, index) in resultList" :key="index">
							<view class="work_circle_text" :class="[item.is_answer == 2 ? 'right_bg' : 'wrong_bg']">{{index+1}}</view>
						</block>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="footer_art" @click="wrong">
				<i class="iconfont iconcuotijiexi"></i>
				<view>错题解析</view>
			</view>
			<view class="footer_art" @click="all">
				<i class="iconfont iconquanbujiexi"></i>
				<view>全部解析</view>
			</view>
		</view>
	</view>
</template>

<script>
	import iCircle from '@/components/xiaoran-circle/xiaoran-circle'
	import cDate from '@/common/util.js'
	export default{
		data() {
			return {
				selftest_log_id: '',
				student_id: '',
				type: '',
				name: '',
				subTime: '',
				duration: '',
				resultList: [],
				is_exam_type:1,
				percent: 0
			}
		},
		onLoad(e) {
			this.selftest_log_id = e.selftest_log_id;
			this.student_id = e.student_id;
			this.type = e.type;
			var data = {
				selftest_log_id: this.selftest_log_id,
				student_id: this.student_id,
				is_typing: 1
			}
			this.$zapi.apiPost('user/selftest.users/SelfTestPresentationDetail',data).then(res=>{
				if(res.data.code == 200) {
					var data = res.data.data;
					this.percent = data.count_fraction;
					this.name = data.title;
					var time = data.update_time;
					this.subTime = cDate.getFormatTime(time)
					this.resultList = data.exam_answer_lists;
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			});
		},
		components:{
			iCircle
		},
		computed: {
			tcolor() {
				let color = '#AFEFE0';
				return color;
			},
			scolor() {
				let color = '#00D5A2';
				return color
			}
		},
		methods:{
			add() {
				if (this.percent >= 100) {
					return false;
				}
				this.percent += 10;
			},
			minus() {
				if (this.percent <= 0) {
					return false;
				}
				this.percent -= 10;
			},
			wrong() {
				uni.navigateTo({
					url: 'wrong?selftest_log_id='+this.selftest_log_id+'&student_id='+this.student_id
				})
			},
			all() {
				uni.navigateTo({
					url: 'all?selftest_log_id='+this.selftest_log_id+'&student_id='+this.student_id
				})
			}
		}
	}
	
</script>

<style>
	.content{
		margin: 0 30upx;
		color: #333333;
		font-weight: Regular;
	}
	.hr{
		height: 20upx;
		background: #FAFAFA;
		margin: 0 -30upx;
	}
	.top{
		height: 320upx;
		display: flex;
	}
	.left{
		width: 65%;
	}
	.right{
		width: 35%;
		height: 226upx;
		margin-top: 50upx;
	}
	.CanvasBox {
		width: 226px;
		height: 226px;
		position: absolute;
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cir_progress_title{
		height: auto;
	}
	.cir_progress_type{
		text-align: center;
		color: #999999;
		font-size: 20upx;
	}
	.cir_progress_score,
	.cir_progress_unit{
		font-size: 36upx;
		color: #00D5A2;
		line-height: 1;
	}
	.title{
		font-weight: Medium;
		font-size: 36upx;
		margin-top: 58upx;
		margin-bottom: 46upx;
	}
	.over-time,
	.length{
		font-size: 28upx;
		margin-bottom: 32upx;
	}
	.work_title{
		margin-top: 30upx;
	}
	.work_title,
	.title_right,
	.title_wrong{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.title_art{
		font-weight: Medium;
		font-size: 36upx;
		padding-left: 20upx;
		border-left: 4upx solid #00D5A2;
		line-height: 1;
	}
	.title_right{
		position: absolute;
		right: 226upx;
	}
	.title_wrong{
		position: absolute;
		right: 48upx;
	}
	.circle{
		width: 20upx;
		height: 20upx;
		border-radius: 50%;
		margin-left: 8upx;
	}
	.true_circle{
		background: #00D5A2;
	}
	.false_circle{
		background: #FF7171;
	}
	.work_art_title{
		color: #999999;
		font-size: 36upx;
		margin: 46upx 0;
	}
	.row{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.work_circle{
		width: 14.28%;
		margin-bottom: 30upx;
		height: 68upx;
	}
	.work_circle_text{
		width: 68upx;
		height: 68upx;
		border-radius: 50%;
		margin-top: 30upx;
		margin-right: 36upx;
		text-align: center;
		line-height: 68upx;
		color: #FFFFFF;
	}
	.right_bg{
		background: #00D5A2;
	}
	.wrong_bg{
		background: #FF7171;
	}
	.footer{
		position: fixed;
		bottom: 0;
		height: 120upx;
		line-height: 120upx;
		width: 100%;
		margin-left: -30upx;
		border-top: 1px solid #E5E5E5;
	}
	.footer_art{
		/* display: inline-block;
		text-align: center; */
		width: 50%;
		height: 120upx;
		line-height: 120upx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.iconcuotijiexi{
		color: #FF9900;
		font-size: 46upx !important;
		margin-right: 28upx;
	}
	.iconquanbujiexi{
		color: #00D5A2;
		font-size: 46upx !important;
		margin-right: 28upx;
	}
	.footer_art view{
		font-size: 30upx;
	}
</style>
